<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div class="table_content">
            <el-row :gutter="4">
              <el-form
                inline
                label-position="right"
                class="demo-form-inline"
                label-width="60px"
              >
                <el-form-item label="关键字:">
                  <el-input
                    style="width: 220px"
                    v-model="searchDto.keywords"
                    placeholder="请输入关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item label="模块:">
                  <el-select v-model="searchDto.type" placeholder="请选择">
                    <el-option
                      v-for="item in smsTemplateKeys"
                      :key="item.keyword"
                      :label="item.label"
                      :value="item.keyword"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="时间：">
                  <el-date-picker
                    v-model="value4"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="search"
                    >查询
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-s-open"
                    type="primary"
                    @click="clear"
                  >
                    重置
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table_content">
            <page-table
              ref="multipleSelection"
              :page-data="pageData"
              :loading="loading"
              :do-get-page-data="getPageData"
            >
              <el-table-column
                type="index"
                width="100px"
                align="center"
                label="序号"
              ></el-table-column>
              <el-table-column
                label="标题"
                prop="title"
                width="250"
                align="center"
                show-overflow-tooltip
              ></el-table-column>

              <el-table-column
                label="模块"
                prop="type"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.type | keyText("LOG_TYPE") }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="地址"
                prop="url"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <!--              <el-table-column-->
              <!--                label="接口名称"-->
              <!--                prop="methodName"-->
              <!--                align="center"-->
              <!--                show-overflow-tooltip-->
              <!--              ></el-table-column>-->
              <el-table-column
                label="ip地址"
                prop="ip"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="请求方法"
                prop="requestMethod"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="操作人"
                prop="userName"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="结果"
                prop="result"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <sz-badge
                    :value="
                      scope.row.result === 'SUCCESS'
                        ? '成功'
                        : scope.row.result === 'FAIL'
                        ? '失败'
                        : ''
                    "
                    :type="statusStyle(scope.row)"
                  ></sz-badge>
                </template>
              </el-table-column>
              <el-table-column
                label="时间"
                width="160"
                prop="createTime"
                align="center"
              ></el-table-column>
              <el-table-column
                label="管理"
                width="200"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="详情" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-view"
                      @click="viewDetails(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
          </div>
        </el-col>
      </el-card>
    </el-row>
    <el-dialog
      :visible.sync="showView"
      v-if="showView"
      title="操作日志详情:"
      width="850px"
    >
      <el-row>
        <el-col :span="24" class="mt10">
          <el-form id="elForm" label-width="90px">
            <el-row>
              <el-col :span="14">
                <el-form-item label="标题:">
                  {{ formInfo.title }}
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="模块:">
                  {{ getModule(formInfo.type) }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14">
                <el-form-item label="请求地址:">
                  {{ formInfo.url }}
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="请求方法:">
                  {{ formInfo.requestMethod }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14">
                <el-form-item label="方法名:">
                  {{ formInfo.methodName }}
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="请求ip:">
                  {{ formInfo.ip }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14">
                <el-form-item label="操作人:">
                  {{ formInfo.userName }}
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="操作时间:">
                  {{ formInfo.createTime }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="14">
                <el-form-item label="客户信息:">
                  {{ formInfo.clientInfo }}
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="结果:">
                  {{
                    formInfo.result === "SUCCESS"
                      ? "成功"
                      : formInfo.result === "FAIL"
                      ? "失败"
                      : ""
                  }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="参数:">
              {{ formInfo.params }}
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </section>
</template>
<script>
import Moment from "moment";

export default {
  created() {
    this.getPageData(1);
  },
  data() {
    return {
      showView: false,
      smsTemplateKeys: this.getDictionary("LOG_TYPE"),
      value4: [],
      searchDto: {
        pageIndex: "",
        pageSize: "",
        keywords: "",
        type: "",
        startTime: "",
        endTime: ""
      },
      pageData: {},
      loading: false,
      formInfo: {}
    };
  },
  watch: {},
  methods: {
    getModule(val) {
      let obj = this.smsTemplateKeys.find(item => item.keyword == val);
      return obj ? obj.label : val;
    },
    getPageData(val) {
      this.searchDto.startTime = "";
      this.searchDto.endTime = "";
      if (this.value4 && this.value4.length > 0) {
        this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      let tem = Object.assign(this.searchDto, val);
      this.API.getSystemLogPageList(tem).then(ret => {
        this.pageData = ret.data;
      });
    },
    search() {
      this.getPageData();
    },
    //查看详情
    viewDetails(row) {
      let tem = { id: row.id };
      this.API.getSystemLogById(tem).then(ret => {
        this.formInfo = ret.data;
        this.showView = true;
      });
    },
    // 状态颜色设置
    statusStyle(row) {
      let cls = "";
      switch (row.result) {
        case "FAIL":
          cls = "danger";
          break;
        case "SUCCESS":
          cls = "success";
          break;
      }
      return cls;
    },
    clear() {
      this.searchDto = {
        pageIndex: "",
        pageSize: "",
        keywords: "",
        type: "",
        startTime: "",
        endTime: ""
      };
      this.value4 = [];
      this.getPageData();
    }
  }
};
</script>
<style scoped>
#elForm /deep/ .el-form-item__label {
  font-size: 15px;
  font-weight: bold;
  color: gray;
}
</style>
